new Vue({
   el: '#wrap',
   data: {
       price: -1,
       area: -1,
       house: {
           village: '',
           style: '',
           region: '',
       },
       houses: []
   },
   created() {
       this.search();
   },
   methods :{
       search() {
           const that = this;
           $.ajax({
               url: '/house/search',
               type: 'POST',
               data: JSON.stringify({
                   house: this.house,
                   price: this.price,
                   area: this.area,
               }),
               contentType: 'application/json',
               dataType: 'json',
               success(data) {
                   console.log(data);
                   that.houses = data.data;
               },
               error(e) {
                   console.error(e);
               },
           });
       },
       setArea(a) {
           if (a == this.area) {
               this.area = -1;
           } else {
               this.area = a;
           }
           this.search();
       },
       setPrice(a) {
           if (a == this.price) {
               this.price = -1;
           } else {
               this.price = a;
           }
           this.search();
       },
       setStyle(a) {
           if (a == this.house.style) {
               this.house.style = '';
           } else {
               this.house.style = a;
           }
           this.search();
       },
       getUrl(id) {
           return "houseDetail.html?id="+id;
       }
   }
});